<style>
	div#container_room{
		background-color:grey;
		height:300px;
		width:950px;
		float:left;
	}
	
	div#sidebar_room{
		background-color:orange;
		float:left;
		height:300px;
		width:200px;
	}
	
	div.room{
	height: 40px; /*Specify Height*/
	width:  30px; /*Specify Width*/
	border: 1px solid black; /*Add 1px solid border, use any color you want*/
	background-color: white; /*Add a background color to the box*/
	text-align:center; /*Align the text to the center*/
	padding:5px;
	margin:5px;
	float:left;
	}
	
	div#room_pagination{
		background-color:green;
		float:left;
		width:1150px;
		
	}
	
	div#room_footer{
		width:1150px;
		background-color:violet;
	}
	
	.clear{
		float:clear;
	}
	
	
	
</style>
<script>
	$(function(){
				// Datepicker

				$('#datepicker').datepicker({
					dateFormat: 'yy-mm-dd',
					inline: true

				});
				
		//$('#datepicker').change(function() {
				
			//		  var a = $('#datepicker').datepicker('getDate');
					  
			//		  alert(a);
			//		});
					
				
			});

</script>
<!--  start page-heading -->
	<div id="page-heading">
		<h1>Pengaturan Kamar</h1>
	</div>

<div id="topmenu" align="right">
<ul id="list">

<li><div align="center">&nbsp;<a href="users"><img src="<?=base_url()?>asset/images/user2.png" align="middle" width="40" height="40"><br/>Lihat Kamar</a></div></li>&nbsp;&nbsp;&nbsp;&nbsp;
<li><div align="center"><a href="adduserview"><img src="<?=base_url()?>asset/images/user2add.png" align="middle" width="40" height="40">&nbsp;<br/>Tambah Kamar</a></div></li>
</ul>
</div>

<div id="sidebar_room">
	<fieldset>
		<form>
		Tanggal:<input type="text" name="datepicker" id="datepicker"  />
		<input type="submit" value="Cari" />
	</form>
	</fieldset>

	</div><!-- end sidebar_room -->
<div id="container_room">
	
	<div id="pagination_room">
		
		<div id="lantai1" class="_current">
			<h3>Lantai 1</h3>
			<div id="room1" class="room">
				kamar 1 
			</div> <!-- end room -->
			<div id="room2" class="room">
				kamar 2 
			</div> <!-- end room -->
			<div id="room3" class="room">
				kamar 3 
			</div> <!-- end room -->
	</div><!-- end lantai 1-->
	
	<div id="lantai2" style="display:none;">
	<h3>Lantai 2</h3>
	<div id="room4" class="room">
				kamar 4 
			</div> <!-- end room -->
			
			<div id="room5" class="room">
				kamar 5 
			</div> <!-- end room -->
			
			
	</div><!-- end lantai 2-->
	
	<div id="lantai3" style="display:none;">
	lantai 3
	
	</div><!-- end lantai 3-->
	
	<div id="lantai4" style="display:none;">
	lantai 4
	
	</div><!-- end lantai 4-->
	
	
	</div><!-- end pagination_room-->
		
	


</div><!--end container_room -->
<div id="room_pagination">
	<div style="margin-left:500px;" id="floor"></div>
</div><!-- end room_pagination -->

<div id="room_footer">
	status
</div>
<script type="text/javascript">
		$(function() {
			
				$("#floor").paginate({
				count 		: 5,
				start 		: 1,
				display     : 5,
				border					: true,
				border_color			: '#fff',
				text_color  			: '#fff',
				background_color    	: 'black',	
				border_hover_color		: '#ccc',
				text_hover_color  		: '#000',
				background_hover_color	: '#fff', 
				images					: false,
				mouse					: 'press',
				onChange     			: function(page){
											$('._current','#pagination_room').removeClass('_current').hide();
											$('#lantai'+page).addClass('_current').show();
				}
				
				});

		});
		</script>
